<template>
    <div class="publish-container">

        <el-row :gutter="20">
            <el-col :span="22" :offset="1">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-card class="article-left-user" shadow="never">
                            <div style="display: inline-block">
                                <img style="width: 70px;height: 70px" :src="require('../img/user-header.gif')"></img>
                            </div>
                            <div style="display: inline-block;margin-left: 10px">
                                <span style="font-size: 22px;cursor: pointer">{{article.username}}</span>
                                <el-divider class="info-spit-line"></el-divider>
                                <span style="color: #999aaa;font-size: 14px;">行龄5年</span>
                            </div>

                            <el-divider class="comment-spit-line"></el-divider>

                            <div class="article-left-info">
                                <span>66</span>
                                <el-divider class="info-spit-line"></el-divider>
                                <span>原创</span>
                            </div>
                            <div class="article-left-info">
                                <span>10</span>
                                <el-divider class="info-spit-line"></el-divider>
                                <span>周排名</span>
                            </div>
                            <div class="article-left-info">
                                <span>99</span>
                                <el-divider class="info-spit-line"></el-divider>
                                <span>总排名</span>
                            </div>
                            <div class="article-left-info">
                                <span>99万+</span>
                                <el-divider class="info-spit-line"></el-divider>
                                <span><i>访问</i></span>
                            </div>
                            <div class="article-left-info">
                                <span>9</span>
                                <el-divider class="info-spit-line"></el-divider>
                                <span><i>等级</i></span>
                            </div>

                            <el-divider class="comment-spit-line"></el-divider>

                            <div class="article-left-info">
                                <span>6654</span>
                                <el-divider class="info-spit-line"></el-divider>
                                <span><i>积分</i></span>
                            </div>
                            <div class="article-left-info">
                                <span>66万+</span>
                                <el-divider class="info-spit-line"></el-divider>
                                <span><i>粉丝</i></span>
                            </div>
                            <div class="article-left-info">
                                <span>99万+</span>
                                <el-divider class="info-spit-line"></el-divider>
                                <span><i>获赞</i></span>
                            </div>
                            <div class="article-left-info">
                                <span>10万+</span>
                                <el-divider class="info-spit-line"></el-divider>
                                <span><i>评论</i></span>
                            </div>
                            <div class="article-left-info">
                                <span>66</span>
                                <el-divider class="info-spit-line"></el-divider>
                                <span><i>收藏</i></span>
                            </div>
                            <el-divider class="comment-spit-line"></el-divider>
                            <el-avatar :src="require('../img/user-header.gif')"></el-avatar>
                            <el-divider direction="vertical" class="img-spit-line"></el-divider>
                            <el-avatar :src="require('../img/user-header.gif')"></el-avatar>
                            <el-divider direction="vertical" class="img-spit-line"></el-divider>
                            <el-avatar :src="require('../img/user-header.gif')"></el-avatar>
                        </el-card>
                        <el-card class="article-left-list" shadow="never">
                            <div style="font-weight: bold">热门文章</div>
                            <el-divider class="comment-spit-line"></el-divider>
                            <div class="recommend-article">Springboot2最新教程</div>
                            <el-divider class="comment-spit-line"></el-divider>
                            <div class="recommend-article">Nginx最新教程</div>
                            <el-divider class="comment-spit-line"></el-divider>
                            <div class="recommend-article">高并发、高可用、高。。。。搭建</div>
                            <el-divider class="comment-spit-line"></el-divider>
                            <div class="recommend-article">钢铁是怎样炼成的？火烧的</div>
                            <el-divider class="comment-spit-line"></el-divider>
                            <div class="recommend-article">Vue+Element后台模板</div>
                        </el-card>
                        <el-card shadow="never">
                            <div style="font-weight: bold">文章目录</div>
                            <el-divider class="comment-spit-line"></el-divider>
                            <div class="recommend-article">一、需求</div>
                            <el-divider class="comment-spit-line"></el-divider>
                            <div class="recommend-article">二、设计</div>
                            <el-divider class="comment-spit-line"></el-divider>
                            <div class="recommend-article">三、开发</div>
                            <el-divider class="comment-spit-line"></el-divider>
                            <div class="recommend-article">四、修复Bug</div>
                            <el-divider class="comment-spit-line"></el-divider>
                            <div class="recommend-article">五、跑路</div>
                        </el-card>
                    </el-col>
                    <el-col :span="14">
                        <!-- 内容区 -->
                        <el-card class="article-card">
                            <div slot="header">
                                <!-- 导航 -->
                                <el-breadcrumb separator-class="el-icon-arrow-right">
                                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                    <el-breadcrumb-item :to="{ path: '/queryArticleByCondition' }">文章管理</el-breadcrumb-item>
                                    <el-breadcrumb-item>审核文章</el-breadcrumb-item>
                                </el-breadcrumb>
                                <!-- 导航 -->
                            </div>
                            <!-- 文章内容 -->
                            <el-form ref="article-form"
                                     class="article-data"
                                     :model="article">
                                <!-- 详细信息 -->
                                <div class="article-title-box">
                                    <h1 class="article-title">{{article.title}}</h1>
                                </div>
                                <div class="article-info-box">
                                    <div class="article-bar-top">
                                        <img class="article-type-img" src="../img/original.png" alt="">
                                        <div class="bar-content">
                                            <a class="article-username">{{article.username}}</a>
                                            <span>{{article.createDate | dateFormatAll}}</span>
                                            <img src="../img/articleReadEyes.png" alt="">
                                            <span>&nbsp;{{viewCount}}</span>
                                            <img @click="collectOver" :hidden="isCollect" src="../img/tobarCollect.png" alt="">
                                            <img @click="collectOver" :hidden="!isCollect" src="../img/tobarCollectionActive.png" alt="">
                                            <span v-show="isCollect" style="color: orangered" @click="cancelCollection">收藏&nbsp;{{collectCount}}</span>
                                            <span v-show="!isCollect" @click="onCollection">收藏&nbsp;{{collectCount}}</span>
                                        </div>
                                    </div>

                                    <div class="article-tags-box">
                                        <div class="tags-box">
                                            <span class="label">分类专栏：</span>
                                            <a class="tag-link">{{channelName}}</a>
                                            <span class="label">文章标签：</span>
                                            <a class="tag-link">Java</a>
                                            <a class="tag-link">Vue</a>
                                        </div>
                                    </div>
                                </div>
                                <!-- 详细信息 -->

                                <!-- 回显tiptap富文本编辑器内容 -->
                                <div class="el-dialog__body">
                                    <div class="el-tiptap-editor__content">
                                        <div v-html="article.content">
                                        </div>
                                    </div>
                                </div>

                                <div class="article-footer-bar">
                                    <img v-show="isLike" style="display:none" src="../img/tobarThumbUpactive.png" alt="">
                                    <img v-show="!isLike" id="is-like-img" src="../img/tobarThumbUp.png" alt="">
                                    <span v-show="isLike" style="color: orangered" @click="cancelLike">点赞&nbsp;{{likeCount}}</span>
                                    <span v-show="!isLike" @click="onLike">点赞&nbsp;{{likeCount}}</span>
                                    <el-divider class="spit-ico" direction="vertical"></el-divider>
                                    <img src="../img/tobarComment.png" alt="">
                                    <img src="../img/tobarCommentactive.png" style="display:none;" alt="">
                                    <span>评论&nbsp;{{commentList.length}}</span>
                                    <el-divider class="spit-ico" direction="vertical"></el-divider>
                                    <img src="../img/tobarShare.png" alt="">
                                    <img src="../img/tobarShareactive.png" style="display:none;" alt="">
                                    <span>分享</span>
                                    <el-divider class="spit-ico" direction="vertical"></el-divider>
                                    <img v-show="!isCollect" src="../img/tobarCollect.png" alt="">
                                    <img v-show="isCollect" style="display: none;" src="../img/tobarCollectionActive.png" alt="">
                                    <span v-show="isCollect" style="color: orangered" @click="cancelCollection">收藏&nbsp;{{collectCount}}</span>
                                    <span v-show="!isCollect" @click="onCollection">收藏&nbsp;{{collectCount}}</span>
                                    <el-divider class="spit-ico" direction="vertical"></el-divider>
                                    <img src="../img/tobarReport.png" alt="">
                                    <img src="../img/tobarReportactive.png" style="display:none;" alt="">
                                    <span>举报</span>
                                </div>
                            </el-form>
                            <!-- 文章内容 -->
                        </el-card>
                        <!-- 内容区 -->
                        <!-- 评论区 -->
                        <el-card>
                            <!-- 评论区 -->
                            <el-row :gutter="20">
                                <el-col :span="2">
                                    <el-avatar :src="require('../img/user-header.gif')" size="medium"></el-avatar>
                                </el-col>
<!--                                <el-col :span="21" v-show="!isActiveComment">-->
<!--                                    <el-input-->
<!--                                        size="medium"-->
<!--                                        placeholder="请输入内容"-->
<!--                                        suffix-icon="el-icon-edit"-->
<!--                                        @focus="commentFocusIn"-->
<!--                                        v-model="comment">-->
<!--                                    </el-input>-->
<!--                                </el-col>-->
<!--                                <el-col :span="1" v-show="!isActiveComment">-->
<!--                                    <el-button type="danger" size="medium" disabled>评论</el-button>-->
<!--                                </el-col>-->

                                <el-col :span="21" style="margin-bottom: 10px" v-show="isActiveComment">
                                    <el-input
                                        ref="comment"
                                        type="textarea"
                                        placeholder="请输入内容"
                                        :rows="4"
                                        v-model="comment"
                                        :focus="isActiveComment"
                                        maxlength="300"
                                        @blur="commentFocusOut"
                                        show-word-limit>
                                    </el-input>
                                </el-col>
                                <el-col :span="23" align="right" v-show="isActiveComment">
                                    <el-button type="danger" size="small" @click="publishArticleComment" round :disabled="comment===''">发表评论</el-button>
                                </el-col>
                            </el-row>

                            <el-divider class="comment-spit-line"></el-divider>


                            <div v-for="c in commentList">
                                <el-row class="article-comment-record">
                                    <el-col :span="1" align="center" class="user-headerImg">
                                        <el-avatar :src="require('../img/user-header.gif')" size="small"></el-avatar>
                                    </el-col>
                                    <el-col :span="21" style="margin-bottom: 10px">
                                        <span class="comment-user-name">{{c.username}}</span>:
                                        <span class="comment-content">
                                            {{c.content}}
                                        </span>
                                        <span class="comment-date">{{c.commentDate | dateDetailFormat}}</span>
                                        <el-popover
                                            :value="isComment"
                                            placement="bottom"
                                            trigger="click">
                                            <el-col :span="24" style="margin-bottom: 10px">
                                                <el-input
                                                    ref="comment"
                                                    type="textarea"
                                                    :placeholder="'回复：'+c.username"
                                                    :rows="4"
                                                    v-model="replyComment"
                                                    maxlength="300"
                                                    show-word-limit>
                                                </el-input>
                                            </el-col>
                                            <el-col :span="24" align="right">
                                                <el-button size="small" round @click="isComment = false">取消回复</el-button>
                                                <el-button type="danger" size="small" @click="publishReplyComment(1,c.id,c.username)" round :disabled="replyComment===''">回复评论</el-button>
                                            </el-col>
                                            <el-link slot="reference" type="primary" :underline="false" @click="isComment = true" style="margin-right: 10px;">回复</el-link>
                                        </el-popover>
                                        <el-link type="primary" :underline="false">删除</el-link>
                                    </el-col>
                                    <el-col :span="1" align="left">
<!--                                        <el-image @mouseover="isLike = true" class="unHeartComment" v-show="!isLike" :src="require('../img/commentUnHeart.png')" style="width: 16px;height: 16px"></el-image>-->
<!--                                        <el-image @mouseout="isLike = false" class="activeHeartComment" v-show="isLike" :src="require('../img/commentActiveHeart.png')"></el-image>-->
                                    </el-col>
                                </el-row>
                                <el-row class="comment-reply-area" v-show="c.replyComments" v-for="reply in c.replyComments">
                                    <el-col :span="1"><div style="height: 36px"></div></el-col>
                                    <el-col :span="23">
                                        <el-card class="comment-reply-card" shadow="never">
                                            <el-row class="article-comment-reply">
                                                <el-col :span="1" align="center" class="user-headerImg">
                                                    <el-avatar :src="require('../img/user-header.gif')" size="small"></el-avatar>
                                                </el-col>
                                                <el-col :span="20" style="margin-bottom: 10px">
                                                    <span class="comment-user-name">{{reply.username}}</span>
                                                    <span style="font-size: 14px;margin-left: 5px;margin-right: 5px;color: #999aaa">回复</span>
                                                    <span class="comment-user-name">{{reply.targetAccount}}</span>:
                                                    <span class="comment-content">
                                                        {{reply.content}}
                                                    </span>
                                                    <span class="comment-date">{{reply.commentDate | dateDetailFormat}}</span>
                                                    <el-popover
                                                        placement="bottom"
                                                        :value="isComment"
                                                        trigger="click">
                                                        <el-col :span="24" style="margin-bottom: 10px">
                                                            <el-input
                                                                ref="comment"
                                                                type="textarea"
                                                                :placeholder="'回复：'+reply.username"
                                                                :rows="4"
                                                                v-model="replyComment"
                                                                maxlength="300"
                                                                show-word-limit>
                                                            </el-input>
                                                        </el-col>
                                                        <el-col :span="24" align="right">
                                                            <el-button size="small" @click="isComment = false" round>取消回复</el-button>
                                                            <el-button type="danger" size="small" @click="publishReplyComment(2,c.id,reply.username)" round :disabled="replyComment===''">回复评论</el-button>
                                                        </el-col>
                                                        <el-link slot="reference" type="primary" @click="isComment = true" :underline="false" style="margin-right: 10px;">回复2</el-link>
                                                    </el-popover>
                                                    <el-link type="primary" :underline="false">删除</el-link>
                                                </el-col>
<!--                                                <el-col :span="1" align="left">-->
<!--                                                    <el-image @mouseover="isLike = true" class="unHeartComment" v-show="!isLike" :src="require('../img/commentUnHeart.png')"></el-image>-->
<!--                                                    <el-image @mouseout="isLike = false" class="activeHeartComment" v-show="isLike" :src="require('../img/commentActiveHeart.png')"></el-image>-->
<!--                                                </el-col>-->
                                            </el-row>
                                        </el-card>
                                    </el-col>
                                </el-row>
                                <el-divider class="comment-spit-line"></el-divider>
                            </div>

<!--                            <el-divider class="comment-spit-line"></el-divider>-->
                            <!-- 评论区 -->
                        </el-card>
                        <!-- 评论区 -->
                    </el-col>
                    <el-col :span="4">
                        <el-card shadow="never">
                            <el-radio-group v-model="article.state" @change="onStateChange" size="small">
                                <el-radio :label="2" border>待审核</el-radio>
                                <el-radio :label="1" border>审核通过</el-radio>
                                <el-radio :label="3" border>审核不通过</el-radio>
                            </el-radio-group>
                            <el-divider></el-divider>
                            <el-button type="primary" @click="onSubmit">确认审核</el-button>
                            <el-button type="info" @click="onBack">返回</el-button>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {getArticleChannelData} from "../../../api/article_channel";
    import {
        cancelCollection,
        cancelLike,
        getCollectionCount,
        getLikeCount,
        isCollection,
        isLike, like, onCollection, onLike,
        queryArticleById,
        queryArticleRedisInfo,
        updateArticle
    } from "../../../api/article";
    import '../../../styles/article.css'
    import {publishArticleComment, queryCommentByArticle} from "../../../api/article_comment";

    export default {
        name: "CheckArticle",
        inject:['reload'],              //注入App里的reload方法
        data() {
            return {
                article: {
                    id: '',
                    title: '',
                    content: '',
                    channel: '',
                    createDate: '',
                    state: '',
                    username: '',       // 作者名称
                },
                isComment: false,
                currentUser: '',        // 当前登录用户
                isActiveComment: true,  // 是否激活评论
                comment: '',            // 评论
                replyComment: '',       // 回复评论
                channelName: '',        // 分类名称
                isLike: false,          // 是否点赞
                likeCount: 0,           // 点赞次数
                isCollect: false,       // 是否收藏
                collectCount: 0,        // 收藏次数
                viewCount: 0,           // 观看次数
                commentList: [],        // 评论数据
            }
        },
        created() {
            this.currentUser = window.localStorage.getItem(window.localStorage.getItem("ww-token"))
            this.article.id = this.$route.query.id
            // this.loadArticleChannelData()    // 加载所有分类数据
            this.loadEditArticleData()          // 加载编辑文章数据
            this.loadArticleRedisInfo()         // 加载点赞数、观看数、收藏数
            this.loadArticleCommentData()       // 加载评论数据
            this.loadIsLike()
            this.loadIsCollection()
            this.loadLikeCount()
            this.loadCollectionCount()
        },
        methods: {
            loadArticleChannelData() {  // 加载文章渠道数据
                getArticleChannelData().then(res => {
                    this.channelList = res.data.data
                })
            },
            loadEditArticleData() {     // 加载编辑文章数据
                queryArticleById({
                    'id': this.article.id
                }).then(res => {
                    const data = res.data.data
                    this.article.title = data.title
                    this.article.content = data.content
                    this.article.channel = data.channel
                    this.article.createDate = data.createDate

                    this.article.state = data.state
                    this.article.username = data.user.username
                    this.channelName = data.articleChannel.type
                })
            },
            onSubmit() {                // 提交审核事件
                // 表单验证
                console.log(this.$refs['article-form'].validate((valid, error) => {
                    // 验证失败
                    if (!valid) {
                        return
                    }
                    // 验证通过 ，登录操作
                    this.onUpdateArticle()
                }))
            },
            onUpdateArticle() {         // 更新文章事件
                updateArticle({
                    'id': this.article.id,
                    'state': this.article.state
                }).then(res => {
                    if(res.data.code == 200){
                        this.$message({
                            message: "审核成功",
                            type: 'success'
                        })
                        this.$router.push('/queryArticleByCondition')
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
            },
            onBack() {                  // 返回事件
                this.$router.push('/queryArticleByCondition')
            },
            onStateChange(val) {        // 修改文章状态事件
                this.article.state = val
            },
            collectOver() {             // 点击收藏事件
                this.isCollect = !this.isCollect
            },
            commentFocusIn() {          // focusin评论输入框事件
                this.isActiveComment = true
                this.$nextTick(()=>{
                    this.$refs.comment.focus()
                })
            },
            commentFocusOut() {         // focusout评论输入框事件
                // this.isActiveComment = false
            },
            loadArticleRedisInfo() {    // 加载文章redis信息(点赞，观看数，收藏数)
                queryArticleRedisInfo({
                    'id': this.article.id
                }).then(res => {
                    const data = res.data.data
                    this.viewCount = data.viewCount === undefined ? 0 : data.viewCount
                    this.collectCount = data.collectCount === undefined ? 0 : data.collectCount
                })
            },
            publishArticleComment() {      // 发表评论
                publishArticleComment({
                    'content': this.comment,
                    'username': this.currentUser,
                    'articleId': this.article.id,
                    'targetAccount': this.article.username
                }).then(res => {
                    if(res.data.code == 200){
                        this.$message({
                            message: "评论成功",
                            type: 'success'
                        })
                        this.loadArticleCommentData()       // 加载评论数据
                    }else{
                        this.$message.error('评论失败')
                    }
                    this.comment = ''
                })
            },
            publishReplyComment(type,commentId,targetAccount) {     // 回复评论
                publishArticleComment({
                    'content': this.replyComment,
                    'username': this.currentUser,
                    'commentId': commentId,
                    'articleId': this.article.id,
                    'targetAccount': targetAccount
                }).then(res => {
                    if(res.data.code == 200){
                        this.$message({
                            message: "评论成功",
                            type: 'success'
                        })
                        this.loadArticleCommentData()       // 加载评论数据
                    }else{
                        this.$message.error('评论失败')
                    }
                    this.isComment = false
                    this.replyComment = ''
                })
            },
            loadArticleCommentData() {      // 加载文章评论数据
                queryCommentByArticle({
                    "articleId": this.article.id
                }).then(res => {
                    this.commentList = res.data.data
                })
            },
            loadIsLike() {          // 是否点赞
                isLike({
                    'articleId': this.article.id,
                    'username': this.currentUser
                }).then(res => {
                    if(res.data.data === true)
                        this.isLike = true
                    else
                        this.isLike = false
                })
            },
            loadIsCollection() {  // 是否收藏
                isCollection({
                    'articleId': this.article.id,
                    'username': this.currentUser
                }).then(res => {
                    if(res.data.data === true)
                        this.isCollect = true
                    else
                        this.isCollect = false
                })
            },
            loadLikeCount() {   // 加载点赞数量
                getLikeCount({
                    'articleId': this.article.id
                }).then(res => {
                    this.likeCount = res.data.data
                })
            },
            loadCollectionCount() {   // 加载收藏数量
                getCollectionCount({
                    'articleId': this.article.id
                }).then(res => {
                    this.collectCount = res.data.data
                })
            },
            onLike() {      // 点赞
                onLike({
                    'articleId': this.article.id,
                    'username': this.currentUser
                }).then(res => {
                    if(res.data.code == 200){
                        this.isLike = true
                        this.loadLikeCount()
                    }else{
                        this.$message.error("系统异常")
                    }
                })
            },
            onCollection() {      // 收藏
                onCollection({
                    'articleId': this.article.id,
                    'username': this.currentUser
                }).then(res => {
                    if(res.data.code == 200){
                        this.isCollect = true
                        this.loadCollectionCount()
                    }else{
                        this.$message.error("系统异常")
                    }
                })
            },
            cancelLike() {      // 取消点赞
                cancelLike({
                    'articleId': this.article.id,
                    'username': this.currentUser
                }).then(res => {
                    if(res.data.code == 200){
                        this.isLike = false
                        this.loadLikeCount()
                    }else{
                        this.$message.error("系统异常")
                    }
                })
            },
            cancelCollection() {      // 取消收藏
                cancelCollection({
                    'articleId': this.article.id,
                    'username': this.currentUser
                }).then(res => {
                    if(res.data.code == 200){
                        this.isCollect = false
                        this.loadCollectionCount()
                    }else{
                        this.$message.error("系统异常")
                    }
                })
            }
        }

    }
</script>

<style scoped lang="less">
    /deep/ .comment-reply-card {
        .el-card__body {
            padding: 10px;
        }
        border: none;
    }
    .comment-spit-line {
        margin: 10px 0;
    }
    .info-spit-line{
        background: transparent;
        margin: 3px 0;
    }
    .img-spit-line{
        margin: 0 4px;
        background: transparent;
    }
    .user-headerImg{
        width: auto;
        margin-right: 10px;
    }
    .spit-ico{
        background: transparent;
        margin: 0 4px;
    }
</style>
